<template>
  <el-card shadow="nerve" class="list">
    <div v-if="clickUser && !multiple" style="margin-bottom: 5px">
      <span>已选择用户: </span>
      <el-tag type="info">{{ clickUser.cname }}</el-tag>
    </div>
    <el-table
      ref="table"
      v-loading="loading"
      :data="listData.records"
      border
      style="width: 100%"
      max-height="400"
      @current-change="clickRow"
      @select-all="selectionChange"
      @select="selectionChange"
    >
      <el-table-column v-if="multiple" type="selection" />
      <el-table-column :label="$t('message.user.index')" width="60" align="center">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.user.name')" align="center">
        <template #default="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.user.cname')" align="center">
        <template #default="scope">
          <span>{{ scope.row.cname }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.user.phone')" align="center" min-width="150">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        :label="$t('message.org.name') + '-' + $t('message.post.name')"
        align="center"
        min-width="200"
      >
        <template #default="scope">
          <div v-for="item in scope.row.orgJobList" :key="item.id" class="orgJobList">
            <el-tag type="success"> {{ item.orgName }} </el-tag>
            <span v-if="item.jobName">
              -
              <el-tag type="success">{{ item.jobName }}</el-tag>
            </span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('message.org.principalOrg')" align="center" prop="orgName" min-width="120">
        <template #default="scope">
          <div v-for="item in scope.row.orgJobList" :key="item.id" class="orgJobList">
            <span v-if="item.userOrgTypeName == '主职'">{{ item.orgName }} </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.user.roles')" align="center" min-width="200">
        <template #default="scope">
          <div v-for="item in scope.row.orgJobList" :key="item.id" class="roles">
            <div v-if="item.userOrgTypeName == '主职'">
              <div v-for="i in item.roleList" :key="i.roleId">
                <el-tag type="info">{{ i.roleName }}</el-tag>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message.org.partTimeOrg')"
        align="center"
        prop="orgName"
        min-width="200"
        style="margin:0;padding:0"
      >
        <template #default="scope">
          <div class="annotations">
            <tr
              v-for="item in scope.row.orgJobList"
              :key="item.id"
              class="annotation-rs cluster-rs"
            >
              <td v-if="item.userOrgTypeName == '兼职'">{{ item.orgName }}</td>
            </tr>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="兼职角色" align="center" prop="roleList" min-width="200">
        <template #default="scope">
          <div class="annotations">
            <tr
              v-for="item in scope.row.orgJobList"
              :key="item.id"
              class="annotation-rs cluster-rs"
            >
              <td v-if="item.userOrgTypeName == '兼职' && item.roleList">
                <div v-for="i in item.roleList" :key="i.roleId">
                  <el-tag type="info">{{ i.roleName }}</el-tag>
                </div>
              </td>
            </tr>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="listData.current"
      :page-size="listData.page"
      layout="total, prev, pager, next, jumper"
      :total="listData.total"
      background
      @current-change="(page) => $emit('change-page', page)"
    />
  </el-card>
</template>

<script>
import { forEach, uniqBy, intersectionBy, differenceBy ,isEmpty} from 'lodash'

export default {
  props: {
    multiple: {
      type: Boolean,
      required: true,
    },
    listData: {
      type: Object,
      required: true,
    },
    modelValue: {
      type: Object,
      required: true,
    },
  },
  emits: ['change-page', 'update:modelValue'],
  data() {
    return {
      selectedRows: {},
      intersectList: [],
      clickUser: null,
    }
  },
  watch: {
    listData() {
      this.checkSelectRows()
    },
  },
  created() {
    this.checkSelectRows()
  },
  methods: {
    selectionChange(rows) {
      const differenceList = differenceBy(this.intersectList, rows, 'userId')
      if(isEmpty(this.modelValue)){
        const data = differenceBy(rows,differenceList,'userId')
        this.$emit('update:modelValue', data)
      }else{
        const data = differenceBy(
        uniqBy([...this.modelValue, ...rows], 'userId'),
          differenceList,
          'userId'
        )
        this.$emit('update:modelValue', data)
      }
      
      
    },
    checkSelectRows() {
      this.$nextTick(() => {
        this.intersectList = intersectionBy(this.listData.records, this.modelValue, 'userId')
        forEach(this.intersectList, (item) => {
          this.$refs.table.toggleRowSelection(item)
        })
      })
    },
    //单选表格项目
    clickRow(row) {
      if(this.multiple){
        return
      }else{
        this.clickUser = row
        this.$emit('update:modelValue', [row])
      }
      
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  margin: 20px 0 0 20px;
}
.el-pagination {
  margin-top: 10px;
  text-align: center;
}
.roles {
  display: flex;
  flex-wrap: wrap;
  & > div {
    margin: 5px;
  }
}
.cluster-rs {
  text-align: center;
}
.annotation-rs {
  width: 100%;
  height: 100%;
  td {
    width: 200px;
    padding: 5px;
    border-right: none;
    text-align: center;
    vertical-align: middle;
  }
  .annotation-rs:last-child {
    td {
      border-bottom: none;
    }
  }
}
</style>
